<template>
	<view class="observe-content">
		<view class="observe-top">
			<rf-navbar title="评价的幼儿" @click="onBack"></rf-navbar>
		</view>

		<view class="observe-bottom" v-if="data.length>0">
			<u-index-list :scrollTop="scrollTop" :index-list="data.map(item => item.code)" customNavHeight="97"
				bottom="90">
				<u-radio-group v-model="checkboxValue1" placement="column">
					<template v-for="(item, index) in data">

						<!-- #ifdef APP-NVUE -->
						<u-index-anchor :text="data.map(item => item.code)[index]" :index="item.code" bgColor="#F5F6FA"
							height="20"></u-index-anchor>
						<!-- #endif -->

						<u-index-item>
							<!-- #ifndef APP-NVUE -->
							<u-index-anchor :text="data.map(item => item.code)[index]" :index="item.code"
								bgColor="#F5F6FA" height="20"></u-index-anchor>
							<!-- #endif -->
							<view class="list-cell" v-for="(cell, row) in item.list" @click="childDetails(cell)">
								<u-radio :checked="cell.isSel" :key="cell.childId" :name="cell.childId"
									activeColor="#58C866" :iconSize="21" @change="handleChange(cell)"></u-radio>
								<view class="cell-image">
									<rf-avatar :avatarUrl="cell.headSculpture" :gender="cell.childSex"></rf-avatar>
								</view>
								<view class="cell-text">
									<view class="cell-text-top">
										{{ cell.childName }}
									</view>
									<view class="cell-text-bom">{{getChildAge(cell)}}</view>
								</view>
								<view class="right" style="flex: 1; display: flex;justify-content: flex-end;"
									v-if="cell.releaseCount">
									<view
										style="width: 88rpx;height: 44rpx; border-radius: 22rpx; background-color: #EBF8EE; display: flex;justify-content: center;align-items: center;">
										<text
											style="color: #2DAE3D; font-size: 26rpx; display: block;">{{cell.releaseCount}}篇</text>
									</view>
								</view>
							</view>
						</u-index-item>
					</template>
				</u-radio-group>
			</u-index-list>
		</view>
		<!-- 数据为空页面 -->
		<view class="observe-bottom" v-else>
			<view
				style="background-color: #fff; width: 100%; height: 400px; display: flex; justify-content: center; align-items: center;">
				<u-empty mode="car" :marginTop="50" text="暂无数据" icon="/static/images/common/empty.png"></u-empty>
			</view>
		</view>
		<!-- 页脚 -->
		<view class="footer">
			<view class="container">
				<view class="btn" @click="onClicked">确认</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		childList
	} from '@/api/child.js'

	export default {
		data() {
			return {
				scrollTop: 0,
				value: '',
				// 是否全选
				isallcheck: false,
				checkboxValue1: "",
				params: {
					childSex: '',
					childAge: '',
					childName: ''
				},

				data: [],
				selChild: [], //选中
				selectChild: null,
				ageList: [
					[{
						'name': '全部',
						'value': "",
					}, {
						'name': '半岁',
						'value': "0.5",
					}, {
						'name': '一岁',
						'value': "1",
					}, {
						'name': '一岁半',
						'value': "1.5",
					}, {
						'name': '两岁',
						'value': "2",
					}, {
						'name': '两岁半',
						'value': "2.5",
					}, {
						'name': '三岁',
						'value': "3",
					}, {
						'name': '三岁半',
						'value': "3.5",
					}, {
						'name': '四岁',
						'value': "4",
					}, {
						'name': '四岁半',
						'value': "4.5",
					}, {
						'name': '五岁',
						'value': "5",
					}, {
						'name': '五岁半',
						'value': "5.5",
					}, {
						'name': '六岁',
						'value': "6",
					}, {
						'name': '六岁半',
						'value': "6.5",
					}, {
						'name': '七岁',
						'value': "7",
					}]
				],
			};
		},
		onLoad(optios) {
			if (optios.selChild) {
				const selChild = JSON.parse(decodeURIComponent(optios.selChild))
				this.checkboxValue1 = selChild.childId;
				this.selectChild = selChild;
				// 设置默认选中
				this.getChildList()
			} else {
				this.getChildList()
			}
		},
		onShow() {
			this.getChildList()
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		computed: {
			getChildAge() {
				return (val) => {

					for (let i = 0; i < this.ageList[0].length; i++) {
						if (this.ageList[0][i].value == val.childAge) {
							return this.ageList[0][i].name;
						}
					}
				}

			},
		},
		methods: {
			onBack() {
				uni.navigateBack();
			},
			// 添加孩子
			addChild() {
				uni.navigateTo({
					url: '/pages-sub/addChild/addChild'
				});
			},
			// 搜索
			changeInp() {
				this.getChildList()
			},
			// 列表
			getChildList() {
				childList(this.params).then(res => {
					this.data = res.data ? res.data : []
					// 设置默认选中
					if (this.selChild.length > 0) {
						const selIds = this.selChild.map(item => item.childId)
						this.data.forEach(item => {
							item.list.forEach(content => {
								if (selIds.includes(content.childId)) {
									this.$set(content, 'isSel', true)
								}
							})

						})
					}

				})
			},
			// 单选，取消全选
			handleChange(val) {
				// if (val.isSel) {
				// 	this.$set(val, 'isSel', false)
				// 	this.selChild.map((item, idx) => {
				// 		if (item.childId === val.childId) {
				// 			this.selChild.splice(idx, 1)
				// 		}
				// 	})
				// } else {
				this.$set(val, 'isSel', true)
				const arrTemp = {
					childId: val.childId,
					username: val.childName,
					gender: val.childSex === 0 ? '男' : '女',
					birthday: val.beBornDt,
					headSculpture: val.headSculpture,
					releaseCount: val.releaseCount,
				}
				this.selChild.push(arrTemp)
				this.selectChild = arrTemp
				// }

			},
			// 选择
			onClicked() {
				console.log(this.checkboxValue1);
				// uni.navigateTo({
				// 	url:'/pages-sub/observeAdd/addObserve?selChild='+encodeURIComponent(JSON.stringify(this.selChild))
				// })
				const selChild = encodeURIComponent(JSON.stringify(this.selectChild))
				// goBackWithParams() {
				//     uni.$emit('backFromSecondPage', selChild);
				//     uni.navigateBack();
				//   },
				uni.$emit('selectEvalChilds', selChild);
				uni.navigateBack();
			},

			// 孩子详情
			childDetails(val) {
				// uni.navigateTo({
				// 	url: '/pages/childFile/childFile'
				// });
				this.$set(val, 'isSel', true)
				this.checkboxValue1 = val.childId;
				const arrTemp = {
					childId: val.childId,
					username: val.childName,
					gender: val.childSex === 0 ? '男' : '女',
					birthday: val.beBornDt,
					headSculpture: val.headSculpture,
					releaseCount: val.releaseCount,
				}
				this.selChild.push(arrTemp)
				this.selectChild = arrTemp
			}
		}
	};
</script>

<style lang="scss" scoped>
	.u-index-anchor {
		background-color: #f5f6fa !important;
	}

	.observe-content {
		min-height: calc(100vh);
		background-color: #fff;

		.observe-top {
			position: fixed;
			z-index: 999;
			width: 100%;
			height: 97px;
			background: url('../../static/icons/toubu.png');
			background-repeat: no-repeat;
			background-size: 100%;

		}

		.observe-bottom {
			position: relative;
			z-index: 990;
			top: 97px;
			background-color: #f5f7f9;

			.list-cell {
				display: flex;
				align-items: center;
				box-sizing: border-box;
				width: 100%;
				height: 148rpx;
				padding: 20px 40rpx;
				overflow: hidden;
				color: #323233;
				font-size: 14px;
				line-height: 28rpx;
				background-color: #fff;

				.cell-image {
					width: 100rpx;
					height: 100rpx;
					background-repeat: no-repeat;
					background-size: 100%;
					margin-right: 24rpx;

					.cell-icon {
						position: absolute;
						right: 0;
						bottom: 0;
					}
				}

				.cell-text {
					.cell-text-top {
						font-size: 32rpx;
						font-family: PingFangSC-Semibold, PingFang SC;
						font-weight: 600;
						color: #3a3d4b;
						margin-top: 8rpx;
					}

					.cell-text-bom {
						margin: 10rpx 0rpx;
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #77798d;
					}
				}
			}


		}

		.popup {
			width: 100%;
			height: 626rpx;
			background: #ffffff;
			border-radius: 24rpx 24rpx 0rpx 0rpx;
		}


		.footer {
			position: fixed;
			z-index: 999;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 90px;
			background: #fff;
			box-shadow: 0rpx -4rpx 8rpx 0rpx rgba(0, 0, 0, 0.02), 0rpx -1rpx 0rpx 0rpx rgba(0, 0, 0, 0.02);


			.container {
				top: 0rpx;
				height: 112rpx;
				padding: 0rpx 32rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				.input {
					margin: 0rpx 0rpx 0rpx 32rpx;
					height: 88rpx;
					background-color: #F4F7F9;
					border-radius: 44rpx;
					padding: 0rpx 180rpx 0rpx 20rpx;
					flex: 2;
				}

				.btn {
					// margin: 0 auto 50rpx;
					width: 94%;
					height: 88rpx;
					background: #58c866;
					border-radius: 44rpx;
					font-size: 32rpx;
					font-weight: 600;
					color: #ffffff;
					line-height: 88rpx;
					text-align: center;
				}
			}

		}
	}
</style>